<template>
  <div id="palette" >
    <el-badge type="success" is-dot :hidden="item.num<=0" :value="item.num" class="item" v-for="(item,index) in tabList" :key="index">
      <div class="tab-i">
        {{item.name}}
      </div>
    </el-badge>



  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      tabList:[
        {name:'主页',num:7},
        {name:'企业视频',num:0},
        {name:'高校视频',num:0},
        {name:'互联网',num:1},
        {name:'互联网',num:0},
        {name:'互联网',num:1},
        {name:'互联网',num:0},
        {name:'互联网',num:0},

      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
black-a=rgb(33,33,33)    //不是黑的黑
#palette

  margin 10px
  width 80%
  height 45px
  //border-radius 10px
  box-sizing border-box
  padding 5px
  transition all .1s
  display flex
  justify-content space-around
  align-items center
  flex-wrap wrap
  border 1px solid gray
  &:hover
    box-shadow 0px 0px 1px 1px gray
.tab-i
  height 40%
  cursor pointer
  position relative
  color rgb(126,119,104)
  font-weight bold

</style>
